<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>消灭格子</title>
    <script type="text/javascript" src="../statics/js/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        body {
            background-color: black;
        }
        
        #main {
            width: 540px;
            height: 540px;
        }
        
        #msg {
            color: white;
        }
        
        .star {
            width: 50px;
            height: 50px;
            margin: 1px;
            border: 1px solid black;
            float: left;
        }
        
        .c0 {
            background-color: orange;
        }
        
        .c1 {
            background-color: green;
        }
        
        .c2 {
            background-color: red;
        }
        
        .c3 {
            background-color: yellow;
        }
        
        .c4 {
            background-color: blue;
        }
        
        .cleaned {
            background-color: black;
        }
        
        .clicked {
            border-color: silver;
            cursor: pointer;
            background-color: silver;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            var blnIE = $.browser.msie;
            var intCnt = 0;
            var blnPlaying = true;
            var funForGetMore = function(x, y, c) {
                var star = $('#' + x + '_' + y);
                if (star.hasClass(c) && !star.hasClass('clicked')) {
                    star.addClass('clicked');
                    getMore(x, y, c);
                }
            }
            var getMore = function(x, y, c) {
                x = parseInt(x);
                y = parseInt(y);
                (x > 0) && funForGetMore(x - 1, y, c);
                (y > 0) && funForGetMore(x, y - 1, c);
                (x < 9) && funForGetMore(x + 1, y, c);
                (y < 9) && funForGetMore(x, y + 1, c);
            }
            var cleanY = function(y, x) {
                y = parseInt(y);
                if (x > -1) {
                    var star = $('#' + x + '_' + y);
                    if (y == 9) {
                        star.attr('class', 'star cleaned');
                    } else {
                        var y_ = y + 1;
                        star.attr('class', $('#' + x + '_' + y_).attr('class'));
                        cleanY(y_, x);
                    }
                } else {
                    for (x = 0; x < 10; x++) {
                        cleanY(y, x);
                    }
                }
            }
            var cleanX = function(x, y) {
                var star = $('#' + x + '_' + y);
                if (x == 0) {
                    star.attr('class', 'star cleaned');
                } else {
                    var x_ = x - 1;
                    star.attr('class', $('#' + x_ + '_' + y).attr('class'));
                    (!star.hasClass('cleaned')) && cleanX(x_, y);
                }
            }
            $('#btn').click(function() {
                if (blnIE) {
                    alert('Sorry, 暂不支持IE浏览器!');
                } else if (!blnPlaying) {
                    if (confirm('游戏已结束, 再玩一次?')) {
                        init();
                    }
                } else if (confirm('确定结束计算总分吗? 点确定游戏将结束!')) {
                    blnPlaying = false;
                    $(this).hide();
                    var intLeft = 100 - $('.cleaned').length;
                    if (intLeft < 20) {
                        intLeft = 20 - intLeft;
                        intLeft = intLeft * intLeft * 5;
                    } else {
                        intLeft = 0;
                    }
                    intCnt += intLeft;
                    $('#msg').html('最后得分: ' + intCnt);
                    if (confirm('游戏结束, 您的得分是: ' + intCnt + ' ! 再玩一次?')) {
                        init();
                    }
                }
            });

            function init() {
                intCnt = 0;
                blnPlaying = true;
                $('#msg').html('');
                $('.star').remove();
                $('#btn').show();
                for (var i = 0; i < 10; i++) {
                    for (var j = 0; j < 10; j++) {
                        $('#main').append('<div class="star c' + parseInt(Math.random() * 5) + '" id="' + i + '_' + j + '"></div>');
                    }
                }
                $('.star').bind('click', function() {
                    var _this = $(this);
                    if (blnIE) {
                        alert('Sorry, 暂不支持IE浏览器!');
                        return false;
                    } else if (!blnPlaying) {
                        if (confirm('游戏已结束, 再玩一次?')) {
                            init();
                        }
                        return false;
                    } else if (_this.hasClass('cleaned')) {
                        return false;
                    }
                    if (_this.hasClass('clicked')) {
                        var intLen = $('.clicked').length;
                        $('.clicked').each(function() {
                            var arrId = $(this).removeClass('clicked').addClass('cleaned').attr('id').split('_');
                            cleanX(arrId[0], arrId[1]);
                        });
                        for (var y = 9; y >= 0; y--) {
                            ($('#9_' + y).hasClass('cleaned')) && cleanY(y, -1);
                        }
                        intLen = intLen * intLen * 5;
                        intCnt += intLen;
                        $('#msg').html('当前得分: ' + intCnt);
                    } else {
                        _this.addClass('clicked').siblings().each(function() {
                            ($(this).hasClass('clicked')) && $(this).removeClass('clicked');
                        });
                        var arrId = _this.attr('id').split('_');
                        getMore(arrId[0], arrId[1], _this.attr('class').replace('star', '').replace('clicked', '').trim());
                        ($('.clicked').length < 2) && $('.clicked').removeClass('clicked');
                    }
                });
            }
            init();
        });
    </script>
</head>

<body>
    <div id="main"></div>
    <div id="msg"></div>
    <button id="btn">结束算总分</button>
</body>

</html>